<script setup>
import { ref, computed, } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SubmitBtn from './button/SubmitBtn.vue'

const props = defineProps({
  showPages: {
    //每页显示的条数
    type: Number,
    default: 10,
  },
  numPages: {
    //显示的页码数(默认显示5个数字分页按钮)
    type: Number,
    default: 5,
  },
  page: {
    //当前页
    type: Number,
    default: 1,
  },
  total: {
    //总条数
    type: Number,
    default: 1,
  },
  isStartEnd: {
    //是否显示首页和尾页
    type: Boolean,
    default: false,
  },
  isTotal: {
    //是否显示总页数
    type: Boolean,
    default: false,
  },
  isJump: {
    //是否显示跳转功能
    type: Boolean,
    default: false,
  },
  oneShow: {
    //总页数为1时，是否显示分页
    type: Boolean,
    default: false,
  }
})

const curPage = ref(props.page) //当前页重新定义变量,便于数据绑定
const inputPage = ref(props.page) //input框里的值

//总页数为1时，是否显示分页
const isShow = computed(() => props.oneShow ? true : countPages.value == 1)
//总页数
const countPages = computed(() => Math.ceil(props.total / props.showPages))

// 分页显示（主要）
const pages = computed(() => {
  let left = 1,
    right = countPages.value, // 最后页
    nowPage = curPage.value - 0,  //当前页,确保为数字类型
    movePoint = Math.ceil(props.numPages / 2), //高亮位置，处于中间
    pages = []

  if (right <= props.numPages) {
    // right = right
  } else if (nowPage > movePoint && nowPage < right - movePoint + 1) {
    left = props.numPages % 2 === 0
      ? nowPage - movePoint
      : nowPage - movePoint + 1
    right = nowPage + movePoint - 1
  } else if (nowPage <= movePoint) {
    left = 1, right = props.numPages
  } else left = right - props.numPages + 1

  while (left <= right) {
    pages.push(left)
    left++
  }
  return pages
})

const route = useRoute()
const router = useRouter()
const emit = defineEmits(['update:page', 'pageChange'])

// 页面切换
const goPage = (pa) => {
  if (pa) {
    pa = isNaN(pa) ? 1 : parseInt(pa)
    if (pa > countPages.value) curPage.value = countPages.value
    else if (pa < 1) curPage.value = 1
    else if (curPage.value != pa) curPage.value = pa

    router.push({ query: { ...route.query, page: curPage.value } })
    emit('update:page', curPage.value) //双向绑定,更新父组件当前页的值
    emit('pageChange', curPage.value)//调用父组件的定义事件（切换到对应的页数）
  }
  inputPage.value = curPage.value //切换分页的同时也改变input框的值
}

const inputVal = (e) => {
  let val = e.currentTarget.value
  inputPage.value = val.replace(/^(0+)|[^\d]+/g, '') //只允许输入正整数
  if (inputPage.value > countPages.value) {
    inputPage.value = countPages.value
  }
}

const jumpPage = (val) => {
  if (val != curPage.value) goPage(val)
}
</script>

<template>
  <ul class="page-container" v-if="isShow">
    <li v-if="isTotal"> <span class="gong">共 {{ total }} 条</span> </li>
    <li v-if="isStartEnd">
      <a class="page-item se" :class="{ 'disable': curPage == 1 }" @click="goPage(1)">首页</a>
    </li>
    <li>
      <a class="page-item btn" :class="{ 'disable': curPage == 1 }" @click="goPage(curPage - 1)">
        <Icon icon-name="bread" class="rotate-90 icon"></Icon>
      </a>
    </li>
    <li v-for="(v, i) in pages" :key="i">
      <a class="page-item" :class="{ active: curPage == v }" @click="goPage(v)">{{ v }}</a>
    </li> 
    <li>
      <a class="page-item btn" :class="{ 'disable': curPage == countPages }" @click="goPage(curPage + 1)">
        <Icon icon-name="bread" class="rotate-270 icon"></Icon>
      </a>
    </li>
    <li v-if="isStartEnd">
      <a class="page-item se" :class="{ 'disable': curPage == countPages }" @click="goPage(countPages)">尾页</a>
    </li>
    <li v-if="isJump" class="go-page">
      前往
      <input type="text" v-model.number="inputPage" @input="inputVal" />
      页
      <SubmitBtn @click="jumpPage(inputPage)">Go</SubmitBtn>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.page-container {

  display: flex;
  flex-wrap: wrap;

  li {
    margin: 5px;
    height: 30px;
    line-height: 30px;
  }

  .btn {
    .icon {
      height: 30px;
    }
  }

  .se {
    width: 40px;
  }

  .page-item {
    display: inline-block;
    min-width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
    background-color: var(--bgc-04) !important;
    color: var(--text-02);
    border: 1px solid var(--border-secondary) !important;

    &.active {
      pointer-events: none;
      background-color: var(--btn-bgc) !important;
      border: 1px solid var(--border-secondary) !important;
      color: var(--text-02);
    }

    &:not(.disable):hover,
    &:not(.disable):active {
      background-color: var(--btn-bgc) !important;
      color: #00a93b;
    }

    &.disable {
      color: #b5b5b5;
      cursor: not-allowed;

      .icon {
        background-color: #b5b5b5 !important;
      }
    }
  }

  .go-page {
    padding-left: 5px;

    &>input {
      width: 40px;
      text-align: center;
      height: 26px;
      outline: 0;
      border: 1px solid var(--border-secondary);
      border-radius: 3px;

      &:focus {
        border-color: #409eff;
      }
    }
  }
}
</style>
